<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>

<body>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <button class="btn3">按钮3</button>
    <script>
        var btn = document.querySelectorAll('button');
        // setAttribute 设置自定义属性 属性信息 写到元素标签结构 元素属性
        // this.getAttribute
        for (var i = 0; i < btn.length; i++) {
            // btn[i].idx = i // 向元素对象对应的堆内存里添加了一个属性
            btn[i].setAttribute('data-index', i)
            btn[i].onclick = function () {
                // console.log(this.idx);
                console.log(this.getAttribute('data-index'));
                console.log(this.getAttribute('class'));
                console.log('我是第' + i + '个按钮');
            }
            console.log(btn[i]);
        }
    </script>
</body>

</html>